<script setup lang="ts">
import { ref } from 'vue'

defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['select'])

// 表情分类
const categories = [
  { id: 'recent', icon: '⏱️', name: '最近使用' },
  { id: 'smileys', icon: '😊', name: '表情' },
  { id: 'animals', icon: '🐻', name: '动物' },
  { id: 'food', icon: '📝', name: '食物' },
  { id: 'activity', icon: '⚽', name: '活动' },
  { id: 'travel', icon: '🚗', name: '旅行' },
  { id: 'objects', icon: '💡', name: '物品' }
]

// 当前选择的分类
const currentCategory = ref('smileys')

// 表情列表按分类
const emojis = {
  recent: ['😀', '😃', '🥰', '😍', '😊', '😇', '🙂', '😐', '😂', '🙂', '😘'],
  smileys: [
    '😀', '😃', '🥰', '😍', '😊', '😇', '🙂', '😐', '😂', '🙂', '😘',
    '😜', '🤓', '😌', '😕', '😄', '🤪', '😲', '😮', '😝', '😎',
    '😔', '😢', '😁', '😑', '😉', '😭', '🤩', '🤡', '😞', '😠', '😇',
    '😀', '😊', '🤔', '🤑', '😎', '😟', '😡', '🤯', '😡', '😠', '🤧'
  ],
  animals: [
    '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁',
    '🐮', '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🐤', '🦆', '🦅',
    '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞'
  ],
  food: [
    '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑',
    '🥭', '🍍', '🥥', '🥝', '🍅', '🥑', '🥦', '🥬', '🥒', '🌶️',
    '🌭', '🍔', '🍟', '🍕', '🥪', '🥙', '🧆', '🌮', '🌯', '🥗', '🥘'
  ],
  activity: [
    '⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱', '🪀',
    '🏓', '🏸', '🏒', '🏑', '🥍', '🏏', '🪃', '🥅', '⛳', '🪁', '🏹'
  ],
  travel: [
    '🚗', '🚕', '🚙', '🚌', '🚎', '🏎️', '🚓', '🚑', '🚒', '🚐', '🛻',
    '🚚', '🚛', '🚜', '🛵', '🏍️', '🛺', '🚲', '🛴', '🛹', '🚁', '🚆'
  ],
  objects: [
    '⌚', '📱', '📲', '💻', '⌨️', '🖥️', '🖨️', '🖱️', '🖲️', '🕹️', '🗜️',
    '💽', '💾', '💿', '📀', '📼', '📷', '📸', '📹', '🎥', '📽️', '📞'
  ]
}

// 切换表情分类
function changeCategory(category: string) {
  currentCategory.value = category
}

// 发送表情到父组件
function selectEmoji(emoji: string) {
  emit('select', emoji)
}
</script>

<template>
  <div v-if="show" class="emoji-picker">
    <div class="emoji-grid">
      <span 
        v-for="emoji in emojis[currentCategory]" 
        :key="emoji" 
        @click="selectEmoji(emoji)"
      >
        {{ emoji }}
      </span>
    </div>
    
    <!-- Category icons - bottom row -->
    <div class="emoji-categories">
      <span 
        v-for="category in categories" 
        :key="category.id"
        class="emoji-category" 
        :class="{ active: currentCategory === category.id }"
        @click="changeCategory(category.id)"
      >
        {{ category.icon }}
      </span>
    </div>
  </div>
</template>

<style scoped>
.emoji-picker {
  background-color: #292d2e;
  border-radius: 0 0 8px 8px;
  padding: 12px 0;
  z-index: 1000;
  margin-top: 8px;
  width: 100%;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 8px;
  height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
}

.emoji-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  width: 22px;
  height: 22px;
  transition: transform 0.1s;
}

.emoji-grid span:active {
  transform: scale(1.2);
}

.emoji-categories {
  display: flex;
  justify-content: space-around;
}

.emoji-category {
  font-size: 18px;
  padding: 8px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.emoji-category:hover,
.emoji-category.active {
  opacity: 1;
}

.emoji-category.active {
  position: relative;
}

.emoji-category.active:after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #24EE89;
  border-radius: 50%;
}
</style>
